<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type=='0'">
      <div :style="{maxHeight: maxHeight}" class="drawer-content">
        <Form ref="form" :model="form" :rules="formValidate" label-position="top">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="考试类型" prop="examType">
                <Select v-model="form.examType" placeholder="请选择">
                  <Option value="1">单选</Option>
                  <Option value="2">多选</Option>
                  <Option value="3">判断</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="考试题目" prop="examTitle">
                <Input v-model="form.examTitle" type="textarea" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32" v-if="form.examType !== '3'">
            <Col span="12">
              <FormItem label="选项A" prop="a">
                <Input v-model="form.a" type="textarea" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="选项B" prop="b">
                <Input v-model="form.b" type="textarea" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32" v-if="form.examType !== '3'">
            <Col span="12">
              <FormItem label="选项C" prop="c">
                <Input v-model="form.c" type="textarea" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="选项D" prop="d">
                <Input v-model="form.d" type="textarea" />
              </FormItem>
            </Col>
          </Row>
          <FormItem label="正确选项" v-if="form.examType === '1'">
            <Radio-group v-model="form.rightAnswer" @on-change="changeRadio">
              <Radio
                v-for="item in radioList" 
                :label="item.value" 
                :key="item.value"
              ><span>{{item.label}}</span></Radio>
            </Radio-group>
          </FormItem>
          <FormItem label="正确选项" v-if="form.examType === '2'">
            <Checkbox-group :model.sync="checkboxList">
              <Checkbox v-for="(v, i) in checkboxList" :key="i" :label="v.value" @click.native="changeCheckbox($event)">
                <span>{{v.label}}</span>
              </Checkbox>
            </Checkbox-group>
          </FormItem>
          <FormItem label="正确选项" prop="rightAnswer" v-if="form.examType === '3'">
            <Radio-group :v-model="judge" @on-change="changeJudge">
              <!-- <Radio value="1"><span>对</span></Radio>
              <Radio value="2"><span>错</span></Radio> -->
              <Radio
                v-for="item in judgeList" 
                :label="item.value" 
                :key="item.value"
              ><span>{{item.label}}</span></Radio>
            </Radio-group>
          </FormItem>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="正确答案解析" prop="rightAnswerAnalysis">
                <Input v-model="form.rightAnswerAnalysis" type="textarea" />
              </FormItem>
            </Col> 
          </Row>
        </Form>
      </div>
      <div class="drawer-footer br" v-show="type!=='0'">
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { 
  createOrUpdateExamContent, 
  getExamContentVo,
} from "@/api/index";
export default {
  name: "break",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 510,
      form: {},
      formValidate: {
        // 表单验证规则
        // breakRoleContent: [{ required: true, message: "请输入违章内容", trigger: "blur" }],
        // breakRoleAccording: [
        //   { required: true, message: "请输入违章依据", trigger: "blur" }
        // ],
        // breakRoleTimeStr: [
        //   { required: true, message: "请选择违章时间", trigger: "change" }
        // ],
        // employeeId: [
        //   { required: true, message: "请选择员工", trigger: "change" }
        // ]
      },
      radioList: [
        {
          label: 'A',
          value: 1
        },
        {
          label: 'B',
          value: 2
        },
        {
          label: 'C',
          value: 3
        },
        {
          label: 'D',
          value: 4
        }
      ],
      checkboxList: [
        {
          label: 'A',
          value: 1
        },
        {
          label: 'B',
          value: 2
        },
        {
          label: 'C',
          value: 3
        },
        {
          label: 'D',
          value: 4
        }
      ],
      curCheckboxRight: [],
      curRadioRight: null,
      judgeList: [
        {
          label: '对',
          value: 1
        },
        {
          label: '错',
          value: 2
        }
      ],
      judge: 0
    };
  },
  methods: {
    init() {
      
    },
    submit() {
      console.log(this.form)
      let that = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.type === "1") {
            // 编辑
            this.form.breakRolePics = array.join(',');
            this.submitLoading = true;
            createOrUpdateExamContent(this.form).then(res => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          } else {
            // 添加
            console.log('add')
            if (that.form.examType === '1') {
              this.form.rightAnswer = this.curRadioRight;
            } else if (this.form.examType === '2') {
              this.curCheckboxRight.forEach((item,index) => {
                item = Number(item)
              })
              this.form.rightAnswer = this.curCheckboxRight.join(',')
            } else {
              this.form.a = '';
              this.form.b = '';
              this.form.c = '';
              this.form.d = '';
            }
            console.log(this.form)
            this.submitLoading = true;
            createOrUpdateExamContent(this.form).then(res => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            })
          }
        }
      });
    },
    changeTime(v) {
      this.form.examTime = v;
    },
    changeRadio(event) {
      console.log(event);
      this.curRadioRight = event;
    },
    changeCheckbox(event) {
      let num = event.target.value;

      let index = this.curCheckboxRight.indexOf(num)
      if (index == -1 && num != undefined) { 
        console.log('不在数组里')
        this.curCheckboxRight.push(num);
      } else {
        console.log('在数组里')
        this.curCheckboxRight.splice(index, 1);
      }

      console.log(this.curCheckboxRight)
    },
    changeJudge(event) {
      console.log(event)
      this.form.rightAnswer = event
    },
    setCurrentValue(value) {
      // let that = this;
      console.log(value)
      this.curCheckboxRight = []
      if (value === this.visible) {
        return;
      }
      if (this.type === "1") {
        this.title = "编辑考试内容";
        this.maxHeight = "100%";
      } else if (this.type === "2") {
        this.title = "添加考试内容";
        this.maxHeight = "100%";
      } else {
        this.title = "考试内容详情";
        this.maxHeight = "100%";
      }
      console.log(this.data)
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type === "0" || this.type === "1") {
        // getExamContentVo({ id: this.data.id }).then(res => {
          // console.log(res)
          // if (res.success) {
            let data = this.data;

            this.form = data;
            if (data.examType === 1) {

            } else if (data.examType === 2) {

            } else if (data.examType === 3) {
              this.judge = Number(this.form.rightAnswer)
            } else {

            }
            this.form.examType = String(data.examType);
            
          // }
        // })
      } else {
        console.log(this.data)
        this.form = {
          jobTrainPartId: this.data.trainingJobPartId,
          examTime: '',
          examType: '1',
          a: '',
          b: '',
          c: '',
          d: '',
          rightAnswer: '',
          rightAnswerAnalysis: ''
        }
        console.log(this.form)
      }
      this.visible = value;
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    }
  },
  mounted() {
  }
};
</script>

<style lang="less">
@import "../../../styles/table-common.less";
.drawer-content {
  overflow: auto;
}
.drawer-content::-webkit-scrollbar {
  display: none;
}
.user-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .info-title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-right: 16px;
  }
}
.info-header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  display: block;
  margin-bottom: 16px;
}
</style>

